<!DOCTYPE html>
<html>
<head>
    <title>Capacitance Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="400"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Parameters
        const cx = canvas.width / 2;
        const cy = 180; // Center Y, shifted up to make space for caption
        const R = 80;
        const R_prime = 130;
        const lineWidth = 2;
        const chargeCount = 12;

        // --- Drawing ---

        ctx.lineWidth = lineWidth;
        ctx.strokeStyle = 'black';

        // 1. Inner Sphere (Metal Conductor)
        // Fill the sphere with a light gray color
        ctx.beginPath();
        ctx.arc(cx, cy, R, 0, 2 * Math.PI);
        ctx.fillStyle = '#EAEAEA';
        ctx.fill();
        // Stroke the border of the sphere
        ctx.stroke();

        // 2. Positive Charges on the Sphere's Surface
        ctx.font = '20px Arial';
        ctx.fillStyle = 'black';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        const chargeRadius = R - 10; // Place charges slightly inside the border
        for (let i = 0; i < chargeCount; i++) {
            const angle = (i / chargeCount) * 2 * Math.PI;
            const x = cx + chargeRadius * Math.cos(angle);
            const y = cy + chargeRadius * Math.sin(angle);
            ctx.fillText('+', x, y);
        }

        // 3. Outer Shell (Dielectric Boundary)
        ctx.beginPath();
        ctx.arc(cx, cy, R_prime, 0, 2 * Math.PI);
        ctx.stroke();

        // 4. Radius Lines
        const angleR = -60 * Math.PI / 180; // Angle for radius R
        const angleR_prime = -25 * Math.PI / 180; // Angle for radius R'

        // Line for R
        ctx.beginPath();
        ctx.moveTo(cx, cy);
        ctx.lineTo(cx + R * Math.cos(angleR), cy + R * Math.sin(angleR));
        ctx.stroke();

        // Line for R'
        ctx.beginPath();
        ctx.moveTo(cx, cy);
        ctx.lineTo(cx + R_prime * Math.cos(angleR_prime), cy + R_prime * Math.sin(angleR_prime));
        ctx.stroke();

        // 5. Labels for Radii (R and R')
        ctx.font = 'italic 22px Times New Roman';
        ctx.fillStyle = 'black';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        
        // Position for 'R' label
        const labelR_x = cx + (R / 2) * Math.cos(angleR) + 10;
        const labelR_y = cy + (R / 2) * Math.sin(angleR) - 5;
        ctx.fillText('R', labelR_x, labelR_y);
        
        // Position for 'R'' label
        const labelR_prime_x = cx + (R + (R_prime-R)/2.5) * Math.cos(angleR_prime);
        const labelR_prime_y = cy + (R + (R_prime-R)/2.5) * Math.sin(angleR_prime);
        ctx.fillText("R'", labelR_prime_x, labelR_prime_y);

        // 6. Caption Text
        ctx.font = "20px 'SimSun', 'Songti SC', serif";
        ctx.fillStyle = 'black';
        ctx.textAlign = 'center';
        const captionY = cy + R_prime + 40;
        ctx.fillText('习题 7－62 图', cx, captionY);

    </script>
</body>
</html>